<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,user-scalable=no"
    />
    <title>Document</title>
    <link rel="stylesheet" href="../css/r_index.css" />
    <link rel="stylesheet" href="../css/minireset.min.css" />
    <link rel="stylesheet" href="../css/r_callme.css" />
    <style>
      .meizu-header-logo-img span {
        display: flex;
        width: 125px;
        height: 30px;
      }
    </style>
  </head>
  <body>
    <div class="nav-box">
      <div class="meizu-header-logo">
        <a href="./meizuHome page.html" class="meizu-header-logo-img"
          ><span></span
        ></a>
      </div>
      <ul class="nav-list active">
        <li><a href="./r_index.html">首页</a></li>
        <li><a href="">定制手机</a></li>
        <li><a href="">AIoT</a></li>
        <li><a href="">智能家居</a></li>
        <li><a href="">团购定制</a></li>
        <li><a href="../html/r_callme.html">联系我们</a></li>
      </ul>
    </div>
    <div class="dzServe"><h1>企业定制服务</h1></div>
    <form action="#">
      <div>联系人姓名：<input type="text" id="account" /></div>

      <div>联系人邮箱：<input type="text" id="password" /></div>

      <div>联系人手机：<input type="text" id="tel" /></div>

      <button type="button" id="btn">提交</button>
    </form>

    <script>
      var reg_account = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9a-zA-Z]{6-12}$/;
      var reg_password = /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{6,8}$/;
      var reg_tel = /^1[3-9][0-9]{9}$/;

      // console.log(   ( (document.forms)[0] ).submit()  );
      btn.onclick = function () {
        var _account = account.value;
        var _password = password.value;
        var _tel = tel.value;

        console.log(_account, _password, _tel);

        if (!_account || !_password || !_tel) {
          alert("信息不能为空");
          return;
        }

        if (!reg_account.test(_account)) {
          return;
        }

        if (reg_password.test(_password)) {
          //
        } else {
          return;
        }

        if (reg_tel.test(_tel)) {
        } else {
          return;
        }

        // 触发表单提交
        document.forms[0].submit();
      };

      var ipts = document.querySelectorAll("input");
      for (var i = 0; i < ipts.length; i++) {
        // 使用let声明变量，每次循环创建一个独立的作用域
        console.log(i);

        ipts[i].onblur = function (ev) {
          console.log(ev.target);
          var dom = 0;
          for (var j = 0; j < ipts.length; j++) {
            if (ev.target == ipts[j]) {
              dom = j;
              break;
            }
          }

          if (dom == 0) {
            //第一个input

            if (!reg_account.test(ipts[dom].value)) {
              console.log("验证失败");
            }
          }
          if (dom == 1) {
            //第2个input
            if (!reg_password.test(ipts[dom].value)) {
              console.log("验证失败");
            }
          }
          if (dom == 2) {
            //第3个input
            if (!reg_tel.test(ipts[dom].value)) {
              console.log("验证失败");
            }
          }
        };
      }

      // console.log(i)
    </script>
  </body>
</html>
